<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            display: flex;
        }

        .area_wrap {
            display: flex;
            width: 85%;
            padding: 0;
            background: #fff;
            line-height: 2rem;
        }

        .close_win {
            flex: 1;
        }

        .area_item {
            width: 33.33%;
            text-align: center;
        }

        .city_item:nth-child(n+1) {
            margin-top: -1px;
            padding: .75rem 0;
        }

        .active {
            background: #0689FB;
            color: #fff;
        }

        .ellipsis-1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="area_wrap">
            <div class="area_item province">
                <template v-for="o,i in city_code">
                <div class="city_item ellipsis-1" :class="{active:i===active_province}" @click="update_province(o,i)">
                    {{o.name}}
                </div>
            </template>
            </div>
            <div class="area_item city">
                <template v-for="o,i in select_province.city">
                <div class="city_item ellipsis-1" :class="{active:i===active_city}" @click="update_city(o,i)">
                    {{o.name}}
                </div>
            </template>
            </div>
            <div class="area_item area">
                <template v-for="o,i in select_city.area">
                <div class="city_item ellipsis-1" :class="{active:i===active_area}" @click="update_area(o,i)">
                    {{o.name}}
                </div>
            </template>
            </div>
        </div>
        <div class="close_win" @click="close_frm()"></div>
    </div>
</body>
<script src="../../script/api.js" charset="utf-8"></script>
<script src="../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../script/common/common.js" charset="utf-8"></script>
<script src="../../script/common/config.js" charset="utf-8"></script>
<script src="../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();

        vm.init();
    }
    var vm = new Vue({
        el: "#app",
        data: {
            default: {
                provinceid: 0,
                cityid: 0,
                areaid: 0,
            },

            city_code: [], //数据源

            select_province: {}, //选中的省
            select_city: {}, //选中的城市
            select_area: {}, //选中的区域

            active_province: 0,
            active_city: 0,
            active_area: 0
        },
        methods: {
            init() {
                if (api.pageParam.provinceid) {
                    this.default.provinceid = api.pageParam.provinceid;
                }
                if (api.pageParam.cityid) {
                    this.default.cityid = api.pageParam.cityid;
                }
                if (api.pageParam.areaid) {
                    this.default.areaid = api.pageParam.areaid;
                }
                this.get_province();
            },
            //获取city 并设置默认选中的省份
            get_province(k = 0) {
                $.getJSON('../../script/regionJson.json', (data, status) => {
                    this.city_code = data;
                    if (this.default.provinceid != 0) {
                        var self = this;
                        $.each(data, function(i, v) {
                            if (v.code == api.pageParam.provinceid) {
                                self.active_province = i;
                                self.select_province = v;
                                return false;
                            }
                        });
                        this.default.provinceid = 0;
                    } else {
                        this.select_province = this.city_code[k];
                    }
                    this.get_city();
                });
            }, //设置默认城市
            get_city(k = 0) {
                if (this.select_province.city) {
                    if (this.default.cityid != 0) {
                        var self = this;
                        $.each(self.select_province.city, function(i, v) {
                            if (v.code == api.pageParam.cityid) {
                                self.active_city = i;
                                self.select_city = v;
                                return false;
                            }
                        });
                        this.default.cityid = 0;
                    } else {
                        this.select_city = this.select_province.city[k];
                        this.active_city = k;
                    }
                } else {
                    this.select_city = [];
                }

                this.get_area();
            }, //设置默认区域
            get_area(k = 0) {
                if (this.select_city.area) {
                    if (this.default.areaid != 0) {
                        var self = this;
                        $.each(self.select_city.area, function(i, v) {
                            if (v.code == api.pageParam.areaid) {
                                self.active_area = i;
                                self.select_area = v;
                                return false;
                            }
                        });
                        this.default.areaid = 0
                    } else {
                        this.select_area = this.select_city.area[k];
                        this.active_area = k;
                    }
                } else {
                    this.select_area = [];
                }
            }, //修改默认省份
            update_province(obj, i) {
                this.select_province = obj;
                this.active_province = i;
                this.get_city();
            }, //修改默认城市
            update_city(obj, i) {
                this.select_city = obj;
                this.active_city = i;
                this.get_area();
            }, //修改默认地区
            update_area(obj, i) {
                this.select_area = obj;
                this.active_area = i;

                //执行指定页面--传递选择信息
                var province = JSON.stringify(this.select_province);
                var city = JSON.stringify(this.select_city);
                var area = JSON.stringify(this.select_area);
                api.execScript({
                    name: api.pageParam.name,
                    frameName: api.pageParam.frameName,
                    script: 'setCity(' + province + ',' + city + ',' + area + ')'
                });

                // 关闭页面
                close_f();
            },
            close_frm() {
                $toast(this.select_province.name + '--' + this.select_city.name + '--' + this.select_area.name);
                close_f();
            },

            statusBar() {
                //沉浸式状态栏
                var systemType = api.systemType;
                var statusBar = api.require('statusBar');
                if (systemType == "ios") {
                    if (navigator.userAgent.indexOf("iPhone") != -1) {
                        $("#app").css({
                            "paddingTop": api.safeArea.top + 'px'
                        });
                    }
                } else {
                    statusBar.getStatusBarHeight(function(ret, err) {
                        $("#app").css({
                            "paddingTop": ret.statusHeight
                        });
                    });
                }
            },
        }
    });
</script>

</html>
